<template>
	<view class="history">
		<p-navbar title="执行历史" ></p-navbar>
		<view class="implement" style="margin-bottom: 20rpx;"  v-for="(item,index) in history" :key="index" @tap="router(item)">
			<view class="implement1">
				<view class="implement1-item1">
					<view class="">追踪策略<text>{{item.createTime}}</text></view>
					<view class="">订单编号<text>{{item.orderCode}}</text></view>
				</view>
				<view class="implement1-item2">
				   {{item.orderState=='-1'?'异常订单':strats[item.orderState-1]}}
				</view>
			</view>
			<view class="implement2">
				<view class="implement2-title">
					<view class="">
						Huobi<text class="text">({{cases(item.baseCurrency)}}/{{cases(item.quoteCurrency)}})</text>
					</view>
					<view class="">
						<view class="implement1-item2">{{item.orderType=='0'?'执行中':'已结束'}}</view>
					</view>
				</view>
				<view class="implement2-flex">
					<view class="">
						<view class="text">总投入(USDT)</view>
						<view class="flex-item1">{{pinter(item.totalAmount,4)}}</view>
					</view>
					<view class="">
						<view class="text" style="text-align: right;">
							<image class="madel-image" @tap.stop="moadel(0)" src="../../static/doubt.png" mode="aspectFill"></image>
							总收益（USDT）</view>
						<view class="flex-item1 color-falls" :class="{'color-rise':pinter(item.getProfitRespDto.totalEarnings,4)>=0}" style="font-weight: bold;">{{pinter(item.getProfitRespDto.totalEarnings,4)}}<text :class="{'color-rise':pinter(item.getProfitRespDto.totalEarningsRate*100,2)>=0}">({{pinter(item.getProfitRespDto.totalEarningsRate*100,2)}}%)</text></view>
					</view>
				</view>
			</view>
			<!-- 盈亏 -->
			<view class="implement3" >
				<view class="implement3-w" v-for="(itemes,indexes) in income" :key="indexes">
					<view class="implement3-title">
					<image class="madel-image" @tap.stop="moadel(indexes+1)" src="../../static/doubt.png" mode="aspectFill"></image>
					{{itemes.name}}
					</view>
					<view class="implement3-item"  :class="{'color-rise':pinter(item.getProfitRespDto[itemes.key],4)>=0}">
					<!-- {{pinter(item.getProfitRespDto[itemes.key],4)}} -->
					{{indexes=='2'?pinter(item.getProfitRespDto[itemes.key]*100,4)+'%':pinter(item.getProfitRespDto[itemes.key],4)}}
					</view>
					<view class="implement3-item"  :class="{'color-rise':pinter(item.getProfitRespDto[itemes.keys]*100,4)>=0}">{{pinter(item.getProfitRespDto[itemes.keys]*100,4)}} <text>%</text></view>
				</view>
			</view>
		</view>
		<u-modal v-model="model" :title="contenttitle[contentindex]" :show-cancel-button="event" cancel-color="#A6ADB4" :title-style="modelstyle" :content-style="modelstyle">
			<view class="slot-content">
				<rich-text :nodes="content[contentindex]"></rich-text>
			</view>
		</u-modal>
		<u-loadmore style="margin-top: 50rpx;" :status="loading" /><!-- 加载 -->
		<hide v-if="history.length=='0'"/>
	</view>
</template>

<script>
	import {income,arys,arystitle} from './details.js'
	export default {
		data() {
			return {
				strats: ['单次策略', '循环策略', '临时停止 ', '止盈停止 ', '清仓停止'],//状态
				page:1,
				loading:'loadmore',//下拉加载
				history:[],//列表记录
				income:income,//实现盈利 浮动盈亏 年化
				event:true,
				modelstyle:{
					"color":"#000000"
				},
				model:false,//提示 
				contenttitle:arystitle,//标题
				content: arys,//内容
				contentindex:0,//选择内容下标
				type:'',//参数判断
			};
		},
		computed:{
			cases() { //转大写
				return t => {
					if(!t) return ''
					return t.toUpperCase();
				}
			},
			pinter(){
				return (t,flex)=>{
					if(!t) return '0.0000'
					// console.log(Number(t).toFixed(flex),flex)
					return this.util.decimal(t,flex)
				}
			},
			target(){
				return t=>{
					if (!t) return '0.00'
					let data = Number(t * 100)
					return Number(data.toString().match(/^\d+(?:\.\d{0,2})?/))
				}
			},
		},
		onReachBottom(){//下拉
			this.page++
			this.starts(this.type)
		},
		onLoad() {
			// console.log(this.$Route.query.type)
			if(this.$Route.query.type){
			this.type = JSON.parse(this.$Route.query.type).symbol//获取上页面获取的数据	
			}
			this.starts(this.type)
		},
		methods:{
			moadel(index){
				this.contentindex=index
				this.model=true
			},
			router(item){
				this.$Router.push({ path: '/pages/transaction/details',query:{type:JSON.stringify(item)}})
			},
			starts(e){
				let methods=e?`order/getStrategySpotRecordList?orderType=1&symbol=${e}`:'order/getStrategySpotRecordList?orderType=1'
				this.loading='loading'
				this.request(`${methods}&pageSize=20&page=${this.page}`).then(async res=>{
					if(res.data.data.length!=0){
						let data=res.data.data
						this.history.push(...data)
						this.loading='loadmore'
					}else{
						this.loading='nomore'
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.history{
		padding-bottom: 20rpx;
	}
	.implement1-item2 {
		font-size: 30rpx;
		// font-family: PingFang SC;
		font-weight: bold;
		// line-height: 50px;
		color: $light-color;
	}
	.implement {
		// background-image: url(../../static/goods.png);
		// @include background;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 40rpx;
		margin: 30rpx ;
		.implement1 {
			@include flex;
			justify-content: space-between;
			border-bottom: 1rpx solid $border;
			padding: 5rpx 0rpx 10rpx;

			.implement1-item1 {
				font-size: 32rpx;

				.item2,
				text {
					padding-left: 10rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					color: $color-fu;
				}

			}

			
		}

		.implement2 {
			font-size: 30rpx;
			padding: 15rpx 0rpx;
			border-bottom: 1rpx solid $border;

			.implement2-title {
				@include flex;
				justify-content: space-between;
				line-height: 50rpx;
			}

			.text {
				color: $color-fu;
				font-size: 24rpx;
			}

			.implement2-flex {
				@include flex;

				justify-content: space-between;

				.flex-item1 {

					line-height: 50rpx;
				}
				.color-falls{
					color: $color-fall;
				}
			}
		}
		.madel-image{
			width: 20rpx;
			height: 20rpx;
			margin-right: 5rpx;
		}
		.implement3 {
			@include flex;
			padding: 15rpx 0rpx 0rpx;
			justify-content: space-between;
			color: $color-rise;
			font-size: 24rpx;
			.implement3-item {
				line-height: 50rpx;
				font-size: 30rpx;
				color: $color-fall;
			}

			.implement3-title {
				line-height: 50rpx;
			}
			.implement3-w:nth-child(3){
				text-align: right;
				}
		}

		.implement4 {
			@include flex;
			padding: 20rpx 0rpx 0rpx;
			justify-content: flex-end;
			color: $light-color;
			font-weight: bold;
			font-size: 30rpx;

			.btn {
				padding-left: 50rpx;
			}
		}
	}
	.slot-content{
		padding: 30rpx 50rpx;
		font-size: 28rpx !important;
		text-align: center;
	}
	/deep/ .u-model{
	       height: auto;
	       overflow: hidden;
	       font-size: 16px;
	       background-color: $color-bgs;
		   border-radius: 15rpx;
	   }
	   /deep/ .u-mode-center-box{
	    min-width: 50px;
	    min-height: 50px;
	    display: block;
	    position: relative;
	    background-color: $color-bgs;
	}
	/deep/ .u-model__btn--hover{
		 background-color: $color-bgs;
	}
</style>
